import React from 'react';
import useIntervalCountUp from '@/hooks/useIntervalCountUp';

const CountUp: React.FC<
    {
        title?: string;
        value?: number;
        unit?: string;
        unitColor?: string;
        color?: string;
        style?: any;
        isStop?: boolean;
    }
> = (props) => {
    const {title, value, style, unit, color, unitColor, isStop} = props;
    const countUpRef = useIntervalCountUp({end: value || 0,}, 5 * 1000)
    const ref = isStop ? null : countUpRef;
    return (
        <div className="number_value_box" style={style}>
            {title}
            {isStop ? (
                <span
                    className="number_value"
                    style={{color: color ? color : '#fff'}}
                    ref={ref}
                >
          {value || 0}
        </span>
            ) : (
                <span
                    className="number_value"
                    style={{color: color ? color : '#fff'}}
                    ref={ref}
                ></span>
            )}
            <span style={{color: unitColor ? unitColor : '#fff'}}>{unit}</span>
        </div>
    );
};
export default CountUp;
